<template>
	<view class="page-total">
		<view class="tab-list">
			<view class="list" v-for="(item,index) in tabBarList" @click="onTabBar(item,index)" :key="index">
				<image :src="item.acImg" mode="widthFix" v-if="tabBarShow == index"></image>
				<image :src="item.img" mode="widthFix" v-else></image>
				<text :class="{'action':tabBarShow==index}">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
		import conf from '@/conf/config.js';
	export default {
		data() {
			return {
				tabBarList: [{
						index: 0,
						name: '首页',
						img: conf.commonBaseUrl+'h5/static/images/tab-home.png',
						acImg: conf.commonBaseUrl+'h5/static/images/tab-home-blue.png',
						pagePath: "/pages/index/index",
					},
					{
						index: 1,
						name: '购物车',
						img: conf.commonBaseUrl+'h5/static/images/tab-cart.png',
						acImg: conf.commonBaseUrl+'h5/static/images/tab-cart-blue.png',
						pagePath: "/pages/index/index-my-order",
					},
					{
						index: 2,
						name: '我的',
						img: conf.commonBaseUrl+'h5/static/images/tab-my.png',
						acImg: conf.commonBaseUrl+'h5/static/images/tab-my-blue.png',
						pagePath: "/pages/index/index-profile",
					},
				],
				codeheight: 0,
				isOverall: 0,
				phoneModel: '',
			};
		},
		props: {
			tabBarShow: {
				type: String,
				default: "0",
			}
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				let that = this;
				// 获取系统信息
				uni.getSystemInfo({
					success(res) {
						that.codeheight = Math.round(res.screenHeight);
						that.phoneModel = res.model
						if (res.model.search('iPhone')) {
							that.isOverall = 0;
						} else if (Math.round(res.screenHeight) > 740) {
							that.isOverall = 1;
						}
					}
				});
			} catch (e) {
				// error
			}
		},
		methods: {
			/**
			 * @param {Object} item
			 * @param {Number} index
			 */
			onTabBar(item, index) {
				// this.tabBarShow = index;
				// #ifdef MP-WEIXIN
				uni.switchTab({
					url: item.pagePath
				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: item.pagePath
				});
				// #endif

			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'TabBar.scss';
</style>
